import Taro, { Component } from '@tarojs/taro'
import { View, Text } from '@tarojs/components'

import { connect } from '@tarojs/redux'
import actions from '../../store/actions'

import PlayList from '../../components/List/index'

const { getDetail, getPlayList } = actions

@connect(({ detailData, getPlayListData }) => ({
  detail: detailData,
  play: getPlayListData
}))
class Anime extends Component {
  config = {
    navigationBarTitleText: '...'
  }

  componentDidMount() {
    const { dispatch, detail } = this.props
    const {
      params: { id }
    } = this.$router
    !(detail.data && detail.data.length) && Taro.showLoading({ title: '加载中' })
    dispatch(
      getPlayList({
        id
      })
    )
    dispatch(
      getDetail({
        id
      })
    ).then(data => {
      const { title } = data.data
      Taro.getEnv() === 'WEB' ? (document.title = title) : Taro.setNavigationBarTitle({ title: title })
      Taro.hideLoading()
    })
  }

  render() {
    const {
      detail: { data },
      play
    } = this.props
    const List = play.data || []
    const id = this.$router.params.id
    return (
      <View>
        <PlayList playList={List} id={id} />
      </View>
    )
  }
}

export default Anime
